<template>
  <el-pagination v-model:currentPage="page.page" :page-sizes="[15, 25, 50, 100]" v-model:page-size="page.page_size" background layout="total, prev, pager, next, sizes" :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
</template>
<script lang="ts" setup>
  import { store } from '@/store'
  import { ref, reactive, computed, watch } from 'vue'
  import bus from '@/utils/bus'
  const emit = defineEmits(['submit'])
  let initPage = ref(false)
  // 总数量
  const pageTotal = computed(() => {
    return store.getters['pageTotal']
  })
  const page = ref({
    page: 1,
    page_size: 15,
    total: pageTotal
  })
  const pageInit = () => {
    page.value.page = 1
    page.value.page_size = 15
  }
  const initPageFun = () => {
    page.value = {
      page: 1,
      page_size: 15,
      total: pageTotal
    }
  }
  initPageFun()

  watch(initPage, (val) => {
    if (val) {
      initPageFun()
      initPage.value = false
    }
  })
  const handleSizeChange = (val: number) => {
    page.value.page_size = val
    emit('submit', page.value)
  }
  const handleCurrentChange = (val: number) => {
    page.value.page = val
    emit('submit', page.value)
    // bus.emit('getImagesList')
  }

  defineExpose({
    initPage,
    pageInit,
  })
</script>
